<template>
    <div class="register">
        <m-header :canreturn=true :type="1" :titleText=titleText></m-header>
        <input-box @getCode="getCode" @getUserInfo="registerAccount" :btnText="btnText" :phoneNo="phoneNo"></input-box>
        <mask-common :showMask="showMask" :maskInfo="maskInfo" @mask="hideMask"></mask-common>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import { postInfo } from '@/base/api/indexpage/getindexinfo';
import MaskCommon from '@/base/maskcommon/maskcommon';
import InputBox from './../inputbox/inputbox';

export default {
    data() {
        return {
            titleText: '注册',
            btnText: '确认注册',
            phoneNo: true,
            showMask: false,
            maskInfo: {
                content: '',
                btn: [],
            },
        };
    },
    methods: {
        getCode(mobile) {
            const smsAddress = '/sms/code';
            postInfo(smsAddress, mobile).then((res) => {
                if (res.status_code === 200) {
                    this.showMask = true;
                    this.maskInfo.content = '短信发送成功';
                    this.maskInfo.btn[0] = {
                        btnTitle: '知道了',
                        type: 'hide',
                    };
                }
            });
        },
        registerAccount(userInfo) {
            const registerAddress = '/user/register';
            userInfo.imei = plus.device.imei;
            postInfo(registerAddress, userInfo).then((res) => {
                console.log(res);
                if (res.status_code === 200) {
                    this.showMask = true;
                    this.maskInfo.content = '恭喜注册成功';
                    this.maskInfo.btn[0] = {
                        btnTitle: '知道了',
                        type: 'hide',
                    };
                    this.maskInfo.btn[1] = {
                        btnTitle: '前往登录',
                        type: 'back',
                    };
                } else {
                    this.showMask = true;
                    this.maskInfo.content = res.message;
                    this.maskInfo.btn[0] = {
                        btnTitle: '知道了',
                        type: 'hide',
                    };
                }
            });
        },
        hideMask() {
            this.showMask = false;
        },
    },
    components: {
        InputBox,
        MHeader,
        MaskCommon,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.register {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;
}
</style>
